/** @jsxImportSource @emotion/react */
import {  css } from "@emotion/react";
import * as React from "react";
import {
    Toolbar,
    Navbar,
    useTheme,
    IconButton,
    Button,
    Tabs,
    Tab,
    Layer,
    TabPanel,
    MenuList,
    MenuItem,
    Tooltip,
    IconChevronDown,
    IconPlus,
    DarkMode,
    LightMode,
    Pager,
    IconArchive,
    DarkRefMode,
    ButtonRefComp,
    Container,
    Text,
    InputLine,
    Input,
    useMMenuBarOcup,
    IconTruck,
    IconArrowRight
} from "customize-easy-ui-component";

import {UserContext} from "../routing/UserContext";
import {Link as RouterLink} from "../routing/Link";



interface Props {
    children?: React.ReactNode;
    //必须接收参数：否则报错React does not recognize the `routeData` prop on a DOM element. If you intentionally want it lowercase `routedata`
    routeData: any;
}
const MainParent: React.FC<Props> =
    ({routeData, ...props}) => {
        const {barHeight, bottomCss } = useMMenuBarOcup(false);
        return (
            <div className="Maint0"
                css={[
                {
                    display: 'flex',
                },
                bottomCss,
            ]}
               {...props}
            >
                <div css={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'nowrap',
                    flexDirection: 'column',
                    alignItems: 'stretch',
                    height: `calc(100vh - ${barHeight})`,
                    width: '100%',
                }}
                >

                { !props.children &&

                       <div css={{
                           display: 'flex',
                           justifyContent: 'center',
                           flexWrap: 'nowrap',
                           flexDirection: 'column',
                           alignItems: 'stretch',
                           margin: 'auto',
                           minHeight: '100vh',
                       }}
                       >
                           <RouterLink href="/maintenance/device/">
                               <Button variant="ghost" intent="primary"
                               >台账相关方面维护</Button>
                           </RouterLink>
                           <RouterLink href="/maintenance/task/">
                               <Button variant="ghost" intent="primary"
                               >检验任务相关方面维护</Button>
                           </RouterLink>
                       </div>

                }

                {props.children}
                </div>
            </div>
        );
};


export default MainParent;
